<template>
  <!-- 弹窗中的 萃取时间 -->
  <div class="extraction-time">
    <div class="el-select_radius date-pick_select">
      <div class="pickTime">
        <date-range-picker
        @passDate="passTmpDate" 
        :startTime="new Date(new Date()-6*24*3600000).toLocaleDateString()" 
        :endTime="new Date().toLocaleDateString()" />
      </div>
      <div v-if="chartData.length" class="el-select_radius c_el-select">
        <el-select placeholder="请选择" name="role" size="small" v-model="displayType" @change="setChartData">
          <el-option v-for="(item,index) in selectList" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div id="extractionChart"></div>
  </div>
</template>

<script>
import { format } from 'silly-datetime'
import { mapState } from 'vuex'
import * as api from '@/api'
import { ONE_DAY_MS } from '@/consts/consts'
import { COFFEE_TYPE } from '@/consts/codeMaps'
import { chartExtraction } from '@/consts/chartExtraction'
import { dayStartTime, dayEndTime } from '@/utils/timeUtil'
import { parseJson} from '@/utils/tool'
import { sortReportData } from '@/utils/deviceData'
let myChart = null
export default {
  data() { 
    return {
      chartData: [],
      queryObj: {
        time_start: new Date(new Date()-6*24*3600000).toLocaleDateString(),
        time_end: new Date().toLocaleDateString()
      },
      selectList: [],
      displayType: null
    }
  },

  computed: {
    ...mapState(['deviceDetail', 'dashtype'])
  },
  methods: {
    draw() {
      myChart = this.$echarts.init(document.getElementById('extractionChart'))
      const opt = chartExtraction(
        this.chartData,
        this.queryObj.time_start,
        this.queryObj.end_start,
        this.isOneDay,
        this.displayType
      )
      myChart.setOption(opt)
      myChart.resize()
    },

    passTmpDate (v) {
      console.log('passTmpDate:', v)
      this.isOneDay = v[1] - v[0] <= ONE_DAY_MS
      console.log('isOneDay:::',this.isOneDay)
      this.queryObj.time_start = v[0]
      this.queryObj.time_end = v[1]
      this.queryDeviceRt()
    },

    setChartData () {
      console.log('setChartData:', this.displayType)
      let c = JSON.stringify(this.chartData)
      this.chartData = []
      this.chartData = JSON.parse(c)
      this.draw()
    },

    //  查询设备即时报表
    async queryDeviceRt() {
      const { code, data } = await api.maxcompute.queryDeviceRt({
        offset: 0,
        limit: -1
      }, {
        dashtype: this.dashtype,
        serial: this.deviceDetail.serial,
        day_start: format(this.queryObj.time_start, 'YYYY-MM-DD'),
        day_end: format(this.queryObj.time_end, 'YYYY-MM-DD'),
        store_id: this.$route.query.branch_number
      })
      if (code === 0) {
        this.selectList = []
        this.chartData = data
        console.log('即时报表？？？',data)
        for (let item of this.chartData) {
          const d = parseJson(item.data)
          const k = d.formula
          let r = null
          if (this.selectList.length > 0) {
            r = this.selectList.find(e => {
              return e && (e.value === k)
            })
            if (!r) {
              this.selectList.push({
                label: COFFEE_TYPE[k],
                value: k
              })
            }
          } else {
            this.selectList.push({
              label: COFFEE_TYPE[k],
              value: k
            })
          }
        }
        console.log('商品筛选',this.selectList)
        if(this.selectList.length > 0 ) {
          const filterArray = this.selectList.filter( item => item.label.indexOf("牛奶") == -1 && item.label.indexOf("热水") == -1)
          this.selectList = filterArray
          this.displayType = this.selectList[0].value
          console.log('商品筛选666666',this.selectList)
        }
        this.draw()
      }
    },
  },
  created () {
    this.queryDeviceRt()
  },
  mounted () {
    
  },
}
</script>

<style lang="stylus" scoped>

.extraction-time {
  position: relative;
  .date-pick_select {
    position: absolute;
    left:getPx(80);
    z-index:55;
    flexMiddle(flex-start); 
    .pickTime {
      width: 260px;
    } 
  }
  .c_el-select {
    width: 170px;
    margin-left: getPx(15);
    .el-input {
      width: 100%;
    }
  }
}
#extractionChart {
  height: getPx(500);
}
@media screen and (max-height:$h){
  #extractionChart {
    height: getPx(410);
    // width: getPx()
  }
}
</style>